<template>
	<view class="price-dialog-wrapper" :class="{ showbox: showState }">
		<view class="price-mask" @click="handleHiddenPrice()"></view>
		<view class="price-dialog">
			<view class="price-dialog-close-btn" @click="handleHiddenPrice()"><img src="https://oss.1qizhuang.com/image/app/icon-close.png" /></view>
			<view class="price-dialog-title">您家的装修估价</view>
			<view class="price-dialog-content">
				<view class="price-dialog-half-price">
					<view class="price-dialog-price-txt">半包价</view>
					<view class="price-dialog-price-wrapper">
						<span class="price-dialog-price-number">{{halfPrice}}</span>
						<span class="price-dialog-price-unit">元</span>
					</view>
				</view>
				<view class="vertical-line"></view>
				<view class="price-dialog-all-price">
					<view class="price-dialog-price-txt">全包价</view>
					<view class="price-dialog-price-wrapper">
						<span class="price-dialog-price-number">{{totalPrice}}</span>
						<span class="price-dialog-price-unit">元</span>
					</view>
				</view>
			</view>
			<view class="price-dialog-continue-btn button--default" @click="handleHiddenPrice()">继续看看</view>
			<p class="footer-text">* 该报价仅供参考，具体报价以量房为准</p>
			<p class="footer-text">* 稍后我们将来电与您联系，提供更详细的装修报价</p>
		</view>
	</view>
</template>

<script>
export default {
	props:['halfPrice','totalPrice'],
	data() {
		return {
			showState: false
		};
	},
	methods: {
		// 显示分享
		handleShowPrice() {
			this.showState = true;
		},
		// 隐藏分享
		handleHiddenPrice() {
			this.showState = false;
		}
	}
};
</script>

<style lang="scss">
.button--default {
	color: #fff;
	background: -webkit-linear-gradient(left, #fa9a70, #ff5824);
	background: linear-gradient(90deg, #fa9a70, #ff5824);
	border-radius: 5px;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	cursor: pointer;
}
.price-dialog-wrapper {
	position: fixed;
	top: 150px;
	left: calc(50% - 157.5px);
	z-index: 2000;
	display: none;
	.price-mask {
		position: fixed;
		top: 0;
		left: 0;
		height:1500px;
		bottom: 0;
		right: 0;
		background: #020202;
		opacity: 0.5;
	}
	.price-dialog {
		width: 315px;
		height: 320px;
		background: #fff;
		border-radius: 4px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		.price-dialog-close-btn {
			position: absolute;
			top: 15px;
			right: 15px;
			img {
				width: 14px;
				height: 14px;
			}
		}
		.price-dialog-title {
			font-size: 18px;
			font-weight: 500;
			line-height: 18px;
			margin-top: 35px;
		}
		.price-dialog-content {
			width: 100%;
			margin: 40px 0;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			.price-dialog-half-price {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-webkit-flex-direction: column;
				flex-direction: column;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			.price-dialog-all-price {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-webkit-flex-direction: column;
				flex-direction: column;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			.vertical-line {
				width: 1px;
				height: 30px;
				-webkit-box-flex: 0;
				-webkit-flex: 0 1px;
				flex: 0 1px;
				background: #eff1f2;
			}
		}
		.footer-text {
			font-size: 12px;
			font-weight: 400;
			color: #9b9b9b;
			line-height: 12px;
			margin: 8px 0 0 20px;
			-webkit-align-self: flex-start;
			align-self: flex-start;
		}
	}
}
.price-dialog-price-txt {
	font-size: 18px;
	font-weight: 400;
	line-height: 18px;
	margin-bottom: 14px;
}
.price-dialog-price-wrapper {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.price-dialog-price-number {
	font-size: 24px;
	font-weight: 500;
	color: #11b06b;
	line-height: 24px;
}
.price-dialog-price-unit {
	font-size: 14px;
	line-height: 14px;
	margin: 5px 0 0 5px;
}
.price-dialog-continue-btn {
	width: 275px;
	height: 40px;
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 20px;
}
.showbox {
	display: block;
}
</style>
